<div v-bind:class="[componentId]">
    <cly-header>
        <template v-slot:header-left>
            <h2> {{i18n('times-of-day.title')}} </h2>
            <cly-tooltip-icon :tooltip="i18n('times-of-day.description')" icon="ion ion-help-circled" style="margin-left:8px" placement="bottom-end"> </cly-tooltip-icon>
        </template>
    </cly-header>
    <cly-main>
        <div class="bu-is-flex bu-is-justify-content-space-between bu-is-align-items-center" style="margin-bottom:32px"> 
            <div class="bu-is-flex bu-is-align-items-center">
                <div class="bu-mr-1 times-of-day__results-text">{{i18n('times-of-day.results-for')}}</div>               
                <cly-event-select v-model="selectedFilter" :blacklistedEvents="['[CLY]_view','feedback','[CLY]_crash']"></cly-event-select>
            </div>
            <el-select :value="selectedDateBucketValue" @change="onSelectDateBucket"> 
                <el-option
                    v-for="item in dateBuckets"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                </el-option>
            </el-select>
        </div>
        <cly-section>
            <times-of-day-scatter-chart :height="600" :series="series" :maxSeriesValue="maxSeriesValue" v-loading="isLoading" :force-loading="isLoading"></times-of-day-scatter-chart>
        </cly-section>
        <cly-section>
            <cly-datatable-n  :rows="timesOfDayRows" :resizable="false" :force-loading="isLoading">
                <template v-slot="scope">
                    <el-table-column fixed width="240" sortable="custom" prop="period" :label="i18n('times-of-day.table-hours-period')">
                    </el-table-column>
                    <el-table-column  width="240" sortable="custom" prop="monday" :label="i18n('times-of-day.monday')">
                        <template slot-scope="scope">
                            {{formatNumber(scope.row.monday)}}
                        </template>
                    </el-table-column>
                    <el-table-column width="240" sortable="custom" prop="tuesday" :label="i18n('times-of-day.tuesday')">
                        <template slot-scope="scope">
                            {{formatNumber(scope.row.tuesday)}}
                        </template>
                    </el-table-column>
                    <el-table-column width="240" sortable="custom" prop="wednesday" :label="i18n('times-of-day.wednesday')">
                        <template slot-scope="scope">
                            {{formatNumber(scope.row.wednesday)}}
                        </template>
                    </el-table-column>
                    <el-table-column width="240" sortable="custom" prop="thursday" :label="i18n('times-of-day.thursday')">
                        <template slot-scope="scope">
                            {{formatNumber(scope.row.thursday)}}
                        </template>
                    </el-table-column>
                    <el-table-column width="240" sortable="custom" prop="friday" :label="i18n('times-of-day.friday')">
                        <template slot-scope="scope">
                            {{formatNumber(scope.row.friday)}}
                        </template>
                    </el-table-column>
                    <el-table-column width="240" sortable="custom" prop="saturday" :label="i18n('times-of-day.saturday')">
                        <template slot-scope="scope">
                            {{formatNumber(scope.row.saturday)}}
                        </template>
                    </el-table-column>
                    <el-table-column width="240" sortable="custom" prop="sunday" :label="i18n('times-of-day.sunday')">
                        <template slot-scope="scope">
                            {{formatNumber(scope.row.sunday)}}
                        </template>
                    </el-table-column>
                </template>
            </cly-datatable-n>
        </cly-section>
    </cly-main>
</div>
